<template>
    <div class="overflow-scroll" style="background-color: var(--boxborder);">
        <div class="mt-20 ml-16 pl-4 py-4 rounded-lg flex" style="background-color: var(--showbox);">
            <img :src="musicdata?.al.picUrl" alt="封面" class="w-40 h-40 rounded-lg">
            <div class="leading-10 ml-10">
                <p>歌曲名: <span class="text-gray-500">{{ musicdata?.name }}</span></p>
                <p>专辑: <router-link :to="`/album/${musicdata?.al.id}`" class="text-blue-500">{{ musicdata?.al.name
                }}</router-link></p>
                <p>歌手: <router-link :to="`/singerDetail/${musicdata?.ar[0].id}`" class="text-blue-500">{{
                    musicdata?.ar[0].name
                }}</router-link></p>
                <p>歌曲时长 <span>{{ setTime(musicdata?.dt ? musicdata.dt.toString() : '') }}</span></p>
            </div>
            <button class="text-xl mt-32 ml-8">
                <Icon name="" class="iconfont icon-tianjia text-red-400 bg-gray-200 rounded-2xl " title="加入播放列表"
                    @click="pushMusic">
                </Icon>
            </button>
        </div>
        <div class="ml-32 mt-4">
            <p>歌词:</p>
            <div v-for="item, index in formatLyric(lyricdata?.lyric).lyric">
                <p class="ml-20 leading-6 text-sm" v-if="index <= 10 || showmore">{{ item.lyric }}</p>
                <p class="ml-60 leading-2" v-if="!showmore && index == 10" title="未完待续">......</p>
            </div>
            <button class="bg-white px-2 rounded-md  float-right" @click="showmore = !showmore"
                v-if="!showmore && formatLyric(lyricdata?.lyric).lyric.length > 10"> 展开</button>
            <button class="bg-white px-2 rounded-md float-right" @click="showmore = !showmore"
                v-if="showmore && formatLyric(lyricdata?.lyric).lyric.length > 10">收拢</button>
        </div>
        <div class="w-full">
            <textarea v-model="content" name="comment" cols="154" rows="4" style="text-indent: 1rem;"
                class="outline-0 border-2 pt-1 rounded-lg mt-10 ml-10 " placeholder="添加评论"> </textarea>
            <el-button type="success" class="float-right mr-1" @click="tocomment">提交</el-button>
        </div>
        <!-- {{ comment.data.value?.data }} -->
        <div class="w-[90%] ml-[5%] rounded-lg mt-12" style="background-color: var(--showbox);">
            <div class="h-8" v-if="comment.data.value?.data.length <= 0">
                <p class="text-center">暂无评论</p>
            </div>
            <div v-if="comment.data.value?.data.length > 0" class="p-4 rounded-lg"
                style="background-color: var(--boxborder);">
                <div v-for="item in comment.data.value?.data" class="border-b-[1px] border-gray-200 mt-2">
                    <p class="font-bold leading-8">{{ item.username }}</p>
                    <div class="w-full h-auto leading-6 mt-2 indent-4">
                        <p class="text-gray-700">{{ item.content }}</p>
                    </div>
                    <p class="text-sm flex justify-end">{{ setCommentTime(item.createdAt)[0] }}</p>
                </div>
            </div>
        </div>
        <div class="w-full h-10"></div>
    </div>
</template>
<script setup lang="ts">
import { formatLyric, setCommentTime, setTime } from '~~/hook/format';
import { useUserStore } from '~~/store/user';
import { usePlayStore } from '~~/store';
const store = usePlayStore()
const content = ref()
//用来接收和使用传参
const router = useRoute()
const user = useUserStore()
const showmore = ref(false)
//歌词信息的接口
interface lyric {
    code: number;
    lrc?: {
        lyric: string
    }
}
// 歌曲信息的接口
interface music {
    code: number;
    songs: {
        name: string,
        id: number,
        ar: {
            id: number,
            name: string,
        }[],
        alia: Array<string>,
        al: {
            id: number,
            name: string,
            picUrl: string,
        },
        dt: number;
    }[]
}
// 请求评论的接口
interface requestType {
    code: number,
    message: string,
    data?: any
}
interface formatLyric {
    time: string,
    lyric: string,
    uid: number
}
const route = useRoute()
const music = await useFetch<music>('/api/music/getInfo', { query: { id: route.params.id } })
const lyric = await useAsyncData<lyric>('music', async () => await $fetch('/api/lyric/getLyric', { query: { id: route.params.id } }))
const musicdata = music.data.value?.songs[0];
const lyricdata = lyric.data.value?.lrc;
const comment = await useAsyncData<requestType>('getComment', () => $fetch('/api/comment/musicGetComment', { query: { musicId: router.params.id } }))
function pushMusic() {
    if (musicdata && store.isExit(musicdata.id)) {
        let tempdata = {
            cover: musicdata.al.picUrl,
            name: musicdata.name,
            id: Number(musicdata.id),

            singer: musicdata.ar[0].name,
            dt: Number(musicdata.dt),
            album: musicdata.al.name,
        }
        store.pushMusic(tempdata);
        if (store.playList.length == 1) {
            store.$patch(() => {
                store.currentId = store.playList[0].id;
                store.playStatus = true;
            })
        }
    } else {
        alert("该歌曲已经存在")
    }
}

const tocomment = async () => {
    if (user.login) {
        if (content.value === undefined) {
            alert('不能为空')
        } else {
            const res = await useAsyncData<requestType>('send', () => $fetch('/api/comment/addComment', { method: 'post', body: { username: user.username, musicId: router.params.id, content: content.value } }))
            if (res.data.value?.code == 200) {
                alert(res.data.value.message)
                content.value = ''
                comment.refresh()
            }
        }
    } else {
        alert('需要登录')
    }
}
</script>
<style lang="less"></style>